<template>
  <div class="xiangqing">
    <van-nav-bar title="歌单详情" left-arrow @click-left="$router.go(-1)" />
    <div class="box">
      <div class="info">
        <van-tag plain type="primary" class="tag">歌单</van-tag>
        <h4 class="song-name">{{ songMsg.name }}</h4>
      </div>
      <div class="img-item">
        <van-image
          width="150px"
          height="150px"
          fit="contain"
          :src="songMsg.coverImgUrl"
        />
      </div>
      <van-cell-group>
        <van-cell title="歌单列表" />
        <van-cell
          :title="item.name"
          v-for="(item, index) in songList"
          :key="index"
          :label="item.al.name"
          @click="$router.push({ path: '/play', query: { id: item.id } })"
        >
          <template #right-icon>
            <van-icon name="play-circle-o" class="icon" />
          </template>
        </van-cell>
      </van-cell-group>
      <div class="hr"></div>
      <div class="comment">
        <h3 class="title">歌单评论</h3>
        <div
          class="commen"
          v-for="(item, index) in songListComment"
          :key="index"
        >
          <div class="info">
            <img :src="item.user.avatarUrl" alt="" />
            <div class="nikeName">
              <span>{{ item.user.nickname }}</span>
              <div>
                <p>{{ item.content }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { songXiangqing, songListComment } from '../home'
export default {
  name: 'gendanXiang',
  data () {
    return {
      songMsg: [], // 歌单信息
      songList: [],
      songListComment: []
    }
  },
  async created () {
    console.log(this.$route.query.id)
    let res = await songXiangqing({ id: this.$route.query.id })
    console.log(res)
    this.songMsg = res.data.playlist
    this.songList = res.data.playlist.tracks
    let arr = []
    // 歌单列表所有的歌曲id
    for (let i = 0; i < this.songList.length; i++) {
      arr.push(this.songList[i].id)
    }
    console.log(arr)
    this.$store.commit('getGedanSongId', arr)
    // 评论信息
    let resComment = await songListComment({ id: this.$route.query.id })
    console.log(resComment)
    this.songListComment = resComment.data.comments
  }
}
</script>

<style scoped>
.info {
  margin-left: 15px;
}
.song-name {
  margin: 10px 0 0 0;
  font-size: 14px;
  font-weight: 400;
}
.img-item {
  margin: 20px 20px;
}
.img-item p {
  font-size: 14px;
}
.icon {
  margin-right: 20px;
}
.comment {
  margin-left: 10px;
}
.hr {
  height: 10px;
  background-color: #f3f3f3;
}
.title {
  margin: 5px 0;
  font-size: 16px;
  font-weight: 400;
}
.commen img {
  height: 24px;
  width: 24px;
  border-radius: 50%;
}
.info {
  display: flex;
  width: 90%;
}
.info {
  font-size: 12px;
}
.nikeName {
  margin-left: 5px;
}
.tag {
  margin-top: 10px;
  margin-right: 10px;
}
</style>
